<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nice</title>
<link rel="stylesheet"
	href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css"
	type="text/css" media="all" />
<link rel="stylesheet" href="/css/default.css" type="text/css"
	media="all" />
<script
	src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script
	src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="/scripts/easyzoom.js"></script>
<link rel="stylesheet" href="/css/web.css" type="text/css" />

<script>
	$(document).ready(function() {
		$('.panelContact').dialog({
			autoOpen : false,
			height : 200,
			width : 250,
			draggable : false,
			position : {
				my : "left top",
				at : "left bottom",
				of : '#btnContact'
			}
		});

		$('#btnContact').on('click', function(e) {
			$('.panelContact').dialog('open');
		});

		$("a.zoom").easyZoom();
		
		$(".InnerImage").on("click", function(e){
			var id = $($(this).find(".ItemId")).text();
			id = $.trim(id)
			
			$("#SingleItem").load("/view/render?itemId="+id, function() {
				$("a.zoom").easyZoom();
			});
			
		})

	});
</script>


</head>
<body>
	<div class="panelTop">
		<div class="title">
			Shop of AI MY, <a href="javascript:void(0)" id="btnContact">Liên
				hệ </a>| <span> <img src="/images/cart.jpg" alt="Cart"
				class="Cart"> Giỏ hàng: 0
			</span>
		</div>
	</div>
	<!-- 
		Dialog for contact info
	 -->
	<div class="panelContact" style="display: none;" title="Liên hệ">
		Phone: 0937265364 <br> Địa chỉ: 27/79 Điện Biên Phủ P.15 Q.Bình
		Thạnh

	</div>

	<div class="blank"></div>
	<div id="SingleItem">
		<jsp:include page="_singleItem.jsp"></jsp:include>
	</div>
	<!-- Product Panel -->
	<div id="Items">
		<ul class="products">
			<c:forEach var="item" items="${items}">
				<li><div class="InnerImage">
						<a href="javascript:void(0)"> <img
							src='/view/image?itemId=<c:out value="${item.keyString}"></c:out>'
							alt="show image">
						</a>
						<div class="ItemId" style="display:none;">
							<c:out value="${item.keyString}"></c:out>
						</div>
					</div>

					<h4>
						<c:out value="${item.name}"></c:out>
					</h4>
					<div>
						<fmt:formatNumber currencySymbol="vnd" maxFractionDigits="0"
							minFractionDigits="0" value="${item.price}"></fmt:formatNumber>
						vnd
					</div></li>
			</c:forEach>
		</ul>
	</div>

</body>
</html>